import React, { Component } from 'react'

import "./detail.less"
class Detail extends Component {

  state = {
    start: null, // 开始坐标
    end: null, // 结束坐标

  }
  render() {
    return (
      <div className="detail_box">
        <div className="detail_top_box">
          这是轮播图
        </div>
        <div className="detail_btm_box" ref="detail_btm_box_touch">
          这是文字内容
        </div>
      </div>
    )
  }

  componentDidMount() {
    let { start, end } = this.state
    this.refs['detail_btm_box_touch'].addEventListener('touchstart', (e) => {
      // console.log('start', '开始');
      start = {
        x: e.targetTouches[0].clientX,
        y: e.targetTouches[0].clientY
      }
    })
    this.refs['detail_btm_box_touch'].addEventListener('touchmove', (e) => {
      // console.log('move', '开始');
      end = {
        x: e.targetTouches[0].clientX,
        y: e.targetTouches[0].clientY
      }
      if (start) {
        let diffentX = end.x - start.x;
        let diffentY = end.y - start.y;

        let liuH = document.documentElement.clientHeight
        let liuW = document.documentElement.clientWidth
        if (Math.abs(diffentX) < Math.abs(diffentY) && diffentX < 0) {
          this.refs['detail_btm_box_touch'].style.top = (liuH - diffentX) + "px"
          this.refs['detail_btm_box_touch'].style.height = `100vh`
          console.log(liuH - diffentX);
        } else if (Math.abs(diffentX) < Math.abs(diffentY) && diffentX > 0) {
          this.refs['detail_btm_box_touch'].style.top = (liuH - diffentX) + "px"
          this.refs['detail_btm_box_touch'].style.height = `calc(100% - 30vh)`
        }

        // touch事件判断方向
        // if(Math.abs(diffentX) > Math.abs(diffentY) && diffentX > 0){
        //   console.log('右');
        // }else if(Math.abs(diffentX) > Math.abs(diffentY) && diffentX < 0){
        //   console.log('左');
        // }else if(Math.abs(diffentX) < Math.abs(diffentY) && diffentX > 0){
        //   console.log('下');
        // }else if(Math.abs(diffentX) < Math.abs(diffentY) && diffentX < 0){
        //   console.log('上');
        // }

      }
    })
    this.refs['detail_btm_box_touch'].addEventListener('touchend', (e) => {
      // console.log('end', '开始');
      let diffentX = end.x - start.x;
      let diffentY = end.y - start.y;
    })

  }
}

export default Detail
